02 — 什么是 WebGL，为什么要用 Three.js

Three.js Journey · Bruno Simon · 难度：简单

02 — 什么是 WebGL，为什么要用 Three.js 课程海报

介绍

如果你来到这里，你大概已经知道 Three.js 是什么了，但让我们来聊一聊它，看看为什么我们需要这个库。

Three.js 是一个 3D JavaScript 库，能让开发者创造面向 Web 的 3D 体验。它基于 WebGL 工作，但你也可以让它兼容 SVG 和 CSS。不过这两者在能力上相当有限，本课程不会涉及。

优秀案例展示

下面是用 Three.js 能做出的效果预览：

在继续之前，我们需要确切地了解 WebGL 是什么。

什么是 WebGL？

WebGL 是一个 JavaScript API，能在 canvas 中以惊人的速度渲染三角形。它兼容大多数现代浏览器，并且速度很快，因为它使用了访客的图形处理单元（GPU）。

WebGL 能绘制的不只是三角形，也可以用来创造 2D 体验，但为了课程的需要，我们会专注于使用三角形来创造 3D 体验。

GPU 可以执行数千次并行计算。想象一下你想渲染一个 3D 模型，而这个模型由 1000 个三角形组成——其实仔细想想，这并不算多。每个三角形包含 3 个顶点。当我们想渲染模型时，GPU 必须计算这 3000 个顶点的位置。因为 GPU 能进行并行计算，它会在一个批次里处理所有三角形的顶点。

一旦模型顶点就位，GPU 还需要绘制这些三角形中每个可见的像素。再一次，GPU 会一口气处理成千上万个像素的计算。

这些放置顶点和绘制像素的指令，用我们所说的 shader 来编写。让我告诉你，shader 很难掌握。我们还需要向这些 shader 提供数据。比如：如何根据模型的变换和相机的属性来放置顶点。这些被称为 matrix（矩阵）。我们还需要提供数据来帮助给像素着色。如果有一盏灯，而三角形正对着这盏灯，它就应该比背对着灯的三角形更亮。

而这正是原生 WebGL 如此之难的原因。在 canvas 上绘制单个三角形至少需要 100 行代码。如果想在这种基础上再加透视、灯光、模型和全部动画，那你就自求多福吧。

不过原生 WebGL 的优势在于它处于底层，非常接近 GPU。这能带来出色的优化和更强的控制力。

Three.js 来救场

Three.js 是一个基于 MIT 许可的 JavaScript 库，直接运行在 WebGL 之上。这个库的目标是大幅简化我们刚才提到的所有处理过程。你只需寥寥几行代码就能得到一个带动画的 3D 场景，而且无需自行提供 shader 和 matrix。

因为 Three.js 就在 WebGL 之上，我们仍然能在某种程度上与它交互。到某个阶段，我们会亲手编写 shader 和创建 matrix。

Ricardo Cabello，也就是 Mr.doob（网站、Twitter），是创建 Three.js 的开发者。他至今仍在维护它，但现在有了庞大的社区一同帮助他。你可以在这里查看贡献者列表：https://github.com/mrdoob/three.js/graphs/contributors

目前，这个库每月更新一次，你可以在这里的 releases 页面查看改动：https://github.com/mrdoob/three.js/releases

你可以在网站的首页发现许多使用 Three.js 的杰出项目：https://threejs.org/

还有一些维护得很好的文档，我们会经常用到：https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

你可以在这里找到成百上千带公开代码的示例：https://threejs.org/examples/#webgl_tonemapping

如果你想跟上更新、发现杰出的项目，我建议你关注 Mr.doob 和 Three.js 的 Twitter 账号：

https://twitter.com/mrdoob

https://twitter.com/threejs

其他库呢？

Three.js 是最流行的 WebGL 库，是有充分理由的，我们前面已经讨论过。它非常稳定，提供了众多功能，文档出色，社区也在努力维护更新，而且它仍然足够接近原生 WebGL。

所以，学习 Three.js 大概是更好的选择。

但还有很多其他库，其中一些也同样令人惊叹。保持好奇心，去试试它们，亲自感受它们的优势。你甚至可能在过程中学到对 Three.js 项目有用的东西。